<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LuaPanda Setting</title>
</head>

<body>
    <!--title-->
    <h1 style="margin:50px 0px 10px 30px">LuaPanda Settings</h1>
    <label style="margin:20px 0px 50px 30px">&nbsp;&nbsp;*本配置项读取的是 launch.json 文件中的数据, 并在配置结束后把结果保存回此文件。在本页面修改配置和直接修改 launch.json 效果是一致的</label>
    <!--target_select-->
    <br> <br>
    <select style="margin:30px 0px 10px 15%" id="target_select" onchange='target_change(this[selectedIndex].value)'>
    </select>
    <br> <br>

    <!--setting-->
    <form id="CreateProject">
        <label class="lab" style="margin:30px 0px 10px 0px" title="lua文件后缀(必须填写), 如lua, txt, lua.bytes"><font size="3" face="Arial">luaFileExtension: </font></label>&nbsp;&nbsp;&nbsp;<input style="margin:5px"
            id="luaFileExtension" type="text" name="fname" /><br />
        <label class="lab" style="margin:10px 0px" title="工作路径，一般默认${workspaceFolder}即可"><font size="3" face="Arial">cwd: </font></label>&nbsp;&nbsp;&nbsp;<input style="margin:5px" id="cwd" type="text"
            name="lname" /><br />
        <label class="lab" style="margin:10px 0px" title="连接端口号, 需要和require('LuaPanda').start(ip,port) 中的端口号保持一致。默认8818"><font size="3" face="Arial">connectionPort: </font></label>&nbsp;&nbsp;&nbsp;<input style="margin:5px" id="connectionPort"
            type="text" name="lname" /><br />

        <label class="lab" title="当调试器建立连接后，自动停止在当前运行位置"><font size="3" face="Arial">stopOnEntry: </font></label>
        <div class="onoffswitch" style="margin:20px">
            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="stopOnEntry">
            <label class="onoffswitch-label" for="stopOnEntry">
                <span class="onoffswitch-inner"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </div> <br>

        <label class="lab" title="自动路径模式，帮助用户减少因路径不一致造成的问题，默认开启"><font size="3" face="Arial">autoPathMode: </font></label>
        <div class="onoffswitch" style="margin:20px">
            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="autoPathMode">
            <label class="onoffswitch-label" for="autoPathMode">
                <span class="onoffswitch-inner"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </div> <br>

        <label class="lab" title="使用C调试库，加快调试效率，默认开启"><font size="3" face="Arial">useCHook: </font></label>
        <div class="onoffswitch" style="margin:20px">
            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="useCHook">
            <label class="onoffswitch-label" for="useCHook">
                <span class="onoffswitch-inner"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </div> <br>

        <!-- <label class="lab" title="路径大小写敏感，默认开启"><font size="3" face="Arial">pathCaseSensitivity: </font></label>
        <div class="onoffswitch" style="margin:20px">
            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="pathCaseSensitivity">
            <label class="onoffswitch-label" for="pathCaseSensitivity">
                <span class="onoffswitch-inner"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </div> <br> -->

        <label class="lab" title="是否打开 LuaPanda 自动升级提示"><font size="3" face="Arial">updateTips: </font></label>
        <div class="onoffswitch" style="margin:20px">
            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="updateTips">
            <label class="onoffswitch-label" for="updateTips">
                <span class="onoffswitch-inner"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </div> <br>

        <label class="lab"></label>
        <input id="save" class="btn_st" style="margin:20px" type="button" value="保存配置" onclick="saveConfig();" />
    </form>

    <div class="divider" style="border-top: thin solid #cccccc;width: 40%;display: block;margin: 0 auto;margin:20px 0px 20px 15%"></div>
    <label class="lab"><font size="3" face="Arial">真机调试工具: </font></label>
    <input id="save" class="btn_st" style="margin:20px" type="button" value="启动 Android 反向代理"
        onclick="startAndroidReverse();" />
    <br>

    <label class="lab"><font size="3" face="Arial">lua代码辅助功能: </font></label>
    <div class="onoffswitch" style="margin:20px">
        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="luaAnalyzerSwitch"" onclick="changeLuaAnalyzerSwitch();">
        <label class="onoffswitch-label" for="luaAnalyzerSwitch">
            <span class="onoffswitch-inner"></span>
            <span class="onoffswitch-switch"></span>
        </label>
    </div> 

    <br>
    <label class="lab" style="margin:10px 0px" title="分析CPP文件，生成对应的lua文件用于代码补全"><font size="3" face="Arial">用于IntelliSense的文件夹路径:  </font></label>&nbsp;&nbsp;&nbsp;<input style="margin:5px" id="preAnalysisPath"
    type="text" name="lname" /> <input class="btn_st" style="margin:20px" type="button" value="生成文件" onclick="preProcess();" />
    <!-- <input class="btn_st2" style="margin:10px" type="button" value="清除生成文件" onclick="clearPreProcessFile();" /> -->
    <br />
    <label style="margin:30px 0px 10px 15%">目前可用于生成 slua / slua-unreal 的导出符号</label>
    
    <br />
    <br>

    <script>
        const vscode = acquireVsCodeApi();
        function preProcess(){
            let preAnalysisPath = document.getElementById('preAnalysisPath');
            let saveObj = new Object();
            saveObj["command"] = "preAnalysisCpp";
            saveObj["path"] = preAnalysisPath.value;
            let webInfo = JSON.stringify(saveObj);
            vscode.postMessage({
                webInfo
            });
        }

        function clearPreProcessFile(){
            let saveObj = new Object();
            saveObj["command"] = "clearPreProcessFile";
            let webInfo = JSON.stringify(saveObj);
            vscode.postMessage({
                webInfo
            });
        } 

        function changeLuaAnalyzerSwitch()
        {
            let switchStatus;
            if (document.getElementById('luaAnalyzerSwitch').checked) 
            {
                switchStatus = true;
            } else {
                switchStatus = false;
            }
            let saveObj = new Object();
            saveObj["command"] = "on_off_analyzer";
            saveObj["switch"] = switchStatus;
            let webInfo = JSON.stringify(saveObj);
            vscode.postMessage({
                webInfo
            });
        }

        function startAndroidReverse() {
            let luapanda = new Object();
            let connectionPort = document.getElementById('connectionPort');
            luapanda["connectionPort"] = parseInt(connectionPort.value);
            luapanda["command"] = "adb_reverse";


            let webInfo = JSON.stringify(luapanda);
            vscode.postMessage({
                webInfo
            });
        }

        function saveConfig() {
            // 当前选中的是哪一项
            let selected_item = document.getElementById('target_select').selectedIndex;
            let config_index = setting_targets_array[selected_item]["config_index"];
            let target_name = setting_targets_array[selected_item]["tgt_name"];
     
            let write_back_config = global_configs[config_index];
            let saveObj = write_back_config["launch.json"][target_name];

            let luaFileExtension = document.getElementById('luaFileExtension');
            let connectionPort = document.getElementById('connectionPort');
            let cwd = document.getElementById('cwd');
            let updateTips = document.getElementById('updateTips');

            // let pathCaseSensitivity = document.getElementById('pathCaseSensitivity');
            let stopOnEntry = document.getElementById('stopOnEntry');
            let useCHook = document.getElementById('useCHook');
            let autoPathMode = document.getElementById('autoPathMode');

            saveObj["luaFileExtension"] = luaFileExtension.value;
            saveObj["connectionPort"] = parseInt(connectionPort.value);;
            saveObj["cwd"] = cwd.value;

            if(updateTips.checked){
                saveObj["updateTips"] = true;
            }else{
                saveObj["updateTips"] = false;
            }

            // if (pathCaseSensitivity.checked) {
            //     saveObj["pathCaseSensitivity"] = true;
            // } else {
            //     saveObj["pathCaseSensitivity"] = false;
            // }

            if (stopOnEntry.checked) {
                saveObj["stopOnEntry"] = true;
            } else {
                saveObj["stopOnEntry"] = false;
            }

            if (useCHook.checked) {
                saveObj["useCHook"] = true;
            } else {
                saveObj["useCHook"] = false;
            }

            if (autoPathMode.checked) {
                saveObj["autoPathMode"] = true;
            } else {
                saveObj["autoPathMode"] = false;
            }

            let returnObj = new Object();
            returnObj["command"] = "save_settings";
            returnObj["configs"] = write_back_config;

            let webInfo = JSON.stringify(returnObj);
            vscode.postMessage({
                webInfo
            });
        }

        function select_setting(selected_item = 0){
            let config_index = setting_targets_array[selected_item]["config_index"];
            let config = global_configs[config_index];
            for (const key in config["launch.json"]) {
                if(key == setting_targets_array[selected_item]["tgt_name"]){
                    fillData(config["launch.json"][key]);
                }
            }
        }


        function fillData(target){
                //初始化luapanda
                if (target["luaFileExtension"] == undefined) {
                    setInputContent("luaFileExtension", "lua");
                } else {
                    setInputContent("luaFileExtension", target["luaFileExtension"]);
                }

                if (target["connectionPort"] == undefined) {
                    setInputContent("connectionPort", "8818");
                } else {
                    setInputContent("connectionPort", target["connectionPort"]);
                }

                if (target["cwd"] == undefined) {
                    setInputContent("cwd", "${workspaceFolder}");
                } else {
                    setInputContent("cwd", target["cwd"]);
                }

                // if (target["pathCaseSensitivity"] == undefined) {
                //     setCheckboxStatue("pathCaseSensitivity", false);
                // } else {
                //     setCheckboxStatue("pathCaseSensitivity", target["pathCaseSensitivity"]);
                // }

                if (target["stopOnEntry"] == undefined ) {
                    setCheckboxStatue("stopOnEntry", true);
                } else {
                    setCheckboxStatue("stopOnEntry", target["stopOnEntry"]);
                }

                if (target["useCHook"] == undefined) {
                    setCheckboxStatue("useCHook", true);
                } else {
                    setCheckboxStatue("useCHook", target["useCHook"]);
                }

                if (target["autoPathMode"] == undefined) {
                    setCheckboxStatue("autoPathMode", true);
                } else {
                    setCheckboxStatue("autoPathMode", target["autoPathMode"]);
                }

                if (target["updateTips"] == undefined) {
                    setCheckboxStatue("updateTips", true);
                } else {
                    setCheckboxStatue("updateTips", target["updateTips"]);
                }           

                if (global_configs["isOpenAnalyzer"] == undefined) {
                    setCheckboxStatue("luaAnalyzerSwitch", true);
                } else {
                    setCheckboxStatue("luaAnalyzerSwitch", global_configs["isOpenAnalyzer"]);
                }
        }

        function target_change(index){
            // 切换时目前不会自动保存
            select_setting(index)
        }

        let setting_targets_array = [];
        function init_select_opt(){
            let select = document.getElementById("target_select");
            let vs_tgt_counter = 0;
            for(let index = 0 ; index < global_configs.length ; index++){
                let launch_path = global_configs[index]["path"];

                for (const key in global_configs[index]["launch.json"]) {
                    let target = global_configs[index]["launch.json"][key];
                    if(target["tag"] == "normal" || target["name"] == "LuaPanda" || target["tag"] == "attach" || target["name"] == "LuaPanda-Attach"){
                        let opt = launch_path +"/.vscode/launch.json : " + target["name"];
                        select.options[vs_tgt_counter] = new Option(opt, vs_tgt_counter);
                        // set setting array
                        let setting_obj = { path: launch_path, tgt_name: target["name"], config_index: index};
                        setting_targets_array.push(setting_obj);
                        vs_tgt_counter ++ ;
                    }
                }
            }
        }

        window.addEventListener('message', event => {
            const message = JSON.parse(event.data); // The JSON data our extension sent
            switch (message.command) {
                case 'init_setting':
                    global_configs = message.configs;
                    global_configs["isOpenAnalyzer"] = message["isOpenAnalyzer"];

                    init_select_opt();
                    select_setting();
                    break;
            }
        });

        function setCheckboxStatue(checkboxName, isOn) {
            document.getElementById(checkboxName).checked = isOn;
        }

        function setInputContent(inputName, text) {
            document.getElementById(inputName).value = text;
        }
    </script>
</body>


<style>
    .onoffswitch {
        position: relative;
        width: 40px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    .onoffswitch-checkbox {
        display: none;
    }

    .onoffswitch-label {
        display: block;
        overflow: hidden;
        cursor: pointer;
        border: 2px solid #999999;
        border-radius: 20px;
    }

    .onoffswitch-inner {
        display: block;
        width: 200%;
        margin-left: -100%;
        transition: margin 0.3s ease-in 0s;
    }

    .onoffswitch-inner:before,
    .onoffswitch-inner:after {
        display: block;
        float: left;
        width: 50%;
        height: 5px;
        padding: 0;
        line-height: 5px;
        font-size: 14px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        box-sizing: border-box;
    }

    .onoffswitch-inner:before {
        content: "";
        padding-left: 10px;
        background-color: rgb(73, 128, 247);
        color: #FFFFFF;
    }

    .onoffswitch-inner:after {
        content: "";
        padding-right: 10px;
        background-color: #EEEEEE;
        color: #999999;
        text-align: right;
    }

    .onoffswitch-switch {
        display: block;
        width: 15px;
        margin: -5px;
        background: rgb(73, 128, 247);
        position: absolute;
        top: 0;
        bottom: 0;
        right: 31px;
        border: 2px solid #999999;
        border-radius: 20px;
        transition: all 0.3s ease-in 0s;
    }

    .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
        margin-left: 0;
    }

    .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
        right: 0px;
    }

    div {
        display: inline-block;
    }

    .lab {
        display: inline-block;
        width: 30%;
        text-align: right;
    }

    .btn_st {
        border: none;
        background: rgb(52, 93, 206);
        color: #ffffff !important;
        font-weight: 100;
        padding: 10px;
        text-transform: uppercase;
        border-radius: 6px;
        display: inline-block;
        transition: all 0.1s ease 0s;
    }

    .btn_st2 {
        border: none;
        background: rgb(184, 55, 55);
        color: #ffffff !important;
        font-weight: 100;
        padding: 10px;
        text-transform: uppercase;
        border-radius: 6px;
        display: inline-block;
        transition: all 0.1s ease 0s;
    }
    .btn_st2:hover {
        color: #ffffff !important;
        font-weight: 700 !important;
        cursor: pointer;
        letter-spacing: 1px;
        background: rgb(240, 74, 74);
        -webkit-box-shadow: 0px 5px 40px -10px rgba(255, 255, 255, 0.57);
        -moz-box-shadow: 0px 5px 40px -10px rgba(255, 255, 255, 0.57);
        transition: all 0.0s ease 0s;
    }

    .btn_st:hover {
        color: #ffffff !important;
        font-weight: 700 !important;
        cursor: pointer;
        letter-spacing: 1px;
        background: rgb(74, 118, 240);
        -webkit-box-shadow: 0px 5px 40px -10px rgba(255, 255, 255, 0.57);
        -moz-box-shadow: 0px 5px 40px -10px rgba(255, 255, 255, 0.57);
        transition: all 0.0s ease 0s;
    }
</style>

</html>